<template>
  <!-- 系统AI回复走试题卡片展示 -->
  <view
    v-if="
      data.source === KKConversationSource.artificial ||
      (data.source === KKConversationSource.system &&
        (data.answerWay === 2 || data.answerWay === 3))
    "
    class="conversationItem-row"
  >
    <view
      v-if="isSelectMode"
      class="conversationItem-select"
      @tap="conversationSlect"
    >
      <image
        class="selectIcon"
        v-if="data.isSelect && isShowSelectView"
        src="@/pagesA/static/images/chat/conversation_select.png"
      ></image>
      <image
        v-if="!data.isSelect && isShowSelectView"
        class="selectIcon"
        src="@/pagesA/static/images/chat/conversation_unSelect.png"
      ></image>
    </view>

    <view
      class="conversationItem"
      :style="{ width: isSelectMode ? 'calc(100% - 78rpx)' : 'calc(100%)' }"
    >
      <view class="conversationItem-time">{{ data.time }}</view>
      <view class="conversation">
        <image
          v-if="data.from === KKConversationFrom.other && data.avatar"
          class="conversation-avatarOther"
          :src="data.avatar"
        ></image>
        <image
          v-if="data.from === KKConversationFrom.other && !data.avatar"
          class="conversation-avatarOther"
          src="@/static/images/common/userDefaultAvatar.png"
        ></image>
        <ConversationStatus
          v-if="
            data.from === KKConversationFrom.me &&
            data.status === KKConversationStatus.loading
          "
          class="conversation-status"
          :data="data"
        />
        <ImgCard
          v-if="data.chatType === KKConversationType.img"
          class="conversation-meCard"
          :class="{
            'conversation-otherCard': data.from === KKConversationFrom.other,
            'conversation-meCardLoading':
              data.from === KKConversationFrom.me &&
              data.status === KKConversationStatus.loading,
          }"
          :maxWidth="converstionMaxWidth()"
          :data="data"
          :tapBgNumber="tapBgNumber"
          @sendFail="sendFail"
          @reSendMsg="reSendMsg"
          @chatTipsClick="chatTipsClick"
        />
        <ConverstionAudio
          v-if="data.chatType === KKConversationType.audio"
          class="conversation-meCard"
          :class="{
            'conversation-otherCard': data.from === KKConversationFrom.other,
            'conversation-meCardLoading':
              data.from === KKConversationFrom.me &&
              data.status === KKConversationStatus.loading,
          }"
          :style="{ maxWidth: converstionMaxWidth() }"
          :data="data"
        />
        <ExamCard
          v-if="data.chatType === KKConversationType.exam"
          class="conversation-meCard"
          :class="{
            'conversation-otherCard': data.from === KKConversationFrom.other,
          }"
          :style="{ maxWidth: converstionMaxWidth() }"
          :width="converstionMaxWidth()"
          :data="data"
          :orgIds="orgIds"
        />
        <TextCard
          v-if="data.chatType === KKConversationType.text"
          class="conversation-meCard"
          :class="{
            'conversation-otherCard': data.from === KKConversationFrom.other,
            'conversation-meCardLoading':
              data.from === KKConversationFrom.me &&
              data.status === KKConversationStatus.loading,
          }"
          :style="{ maxWidth: converstionMaxWidth() }"
          :isSelectMode="isSelectMode"
          :data="data"
          :tapBgNumber="tapBgNumber"
          @sendFail="sendFail"
          @reSendMsg="reSendMsg"
          @chatTipsClick="chatTipsClick"
          @converstationTouchStart="converstationTouchStart"
          @converstationTouchEnd="converstationTouchEnd"
        />
        <RichTextCard
          v-if="data.chatType === KKConversationType.richText"
          class="conversation-meCard"
          :class="{
            'conversation-otherCard': data.from === KKConversationFrom.other,
          }"
          :style="{ maxWidth: converstionMaxWidth() }"
          :data="data"
          :isSelectMode="isSelectMode"
          @converstationTouchStart="converstationTouchStart"
          @converstationTouchEnd="converstationTouchEnd"
        />
        <VideoCard
          v-if="data.chatType === KKConversationType.video"
          class="conversation-meCard"
          :class="{
            'conversation-otherCard': data.from === KKConversationFrom.other,
            'conversation-meCardLoading':
              data.from === KKConversationFrom.me &&
              data.status === KKConversationStatus.loading,
          }"
          :style="{ maxWidth: converstionMaxWidth() }"
          :data="data"
          :maxWidth="converstionMaxWidth()"
          @sendFail="sendFail"
          @reSendMsg="reSendMsg"
        />
        <image
          v-if="data.from === KKConversationFrom.me"
          class="conversation-avatarMe"
          :src="meAvatar(data)"
        ></image>
      </view>
    </view>
  </view>
  <SystemMsgCard v-else :data="data" />
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onMounted } from "vue";
import { ref } from "vue";

import {
  KKConversationFrom,
  KKConversationStatus,
  KKConversationType,
  KKConversationSource,
} from "./conversitonEnum";

import ConverstionAudio from "./converstionAudio.vue";
import ExamCard from "./examCard.vue";
import TextCard from "./textCard.vue";
import RichTextCard from "./richTextCard.vue";
import ImgCard from "./imgCard.vue";
import VideoCard from "./videoCard.vue";
import SystemMsgCard from "./systemMsgCard.vue";
import ConversationStatus from "./conversationStatus.vue";

import meDefaultAvatar from "@/static/images/common/avatar_me.png";
import systemAvatar from "@/pagesA/static/images/chat/system_avatar.png";

import { computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  isSelectMode: {
    type: Boolean,
    default: false,
  },
  selectDatas: {
    type: Array,
    default: () => [],
  },
  tapBgNumber: {
    type: Number,
    default: 0,
  },
  orgIds: {
    type: Array,
    default: () => [],
  },
});

const isShowSelectView = computed(() => {
  if (props.isSelectMode) {
    if (
      props.data.chatType === KKConversationType.text ||
      props.data.chatType === KKConversationType.img
    ) {
      let textCount = 0;
      let imgCount = 0;
      props.selectDatas.forEach((item: any) => {
        if (item.chatType === KKConversationType.text) {
          textCount += 1;
        } else if (item.chatType === KKConversationType.img) {
          imgCount += 1;
        }
      });
      if (props.data.chatType === KKConversationType.text && imgCount === 0) {
        return true;
      }
      if (props.data.chatType === KKConversationType.img && textCount === 0) {
        return true;
      }
    }
  }
  return false;
});

const meAvatar = (data: any) => {
  if (data.source === KKConversationSource.system) {
    return systemAvatar;
  }
  return meDefaultAvatar;
};

const converstionMaxWidth = () => {
  if (props.data.chatType === KKConversationType.exam) {
    if (props.data.isPhonePhoto && props.data.aiExamList.length === 1) {
      const examItem = props.data.aiExamList[0];
      if (examItem.aiReplayHtml) {
        if (props.isSelectMode) {
          return "430rpx";
        }
        return "478rpx";
      }
    }
    if (props.isSelectMode) {
      return "430rpx";
      return `calc(100vw - 78rpx - 166rpx)`;
    }
    return "478rpx";
    return `calc(100vw - 78rpx - 90rpx)`;
  }
  if (props.isSelectMode) {
    return "430rpx";
  }
  return "478rpx";
};

const sendFail = () => {
  emit("sendFail", props.data);
};

// 重新发送消息
const reSendMsg = () => {
  emit("reSendMsg", props.data);
};

const chatTipsClick = (data: any) => {
  emit("chatTipsClick", data);
};

const conversationSlect = () => {
  emit("conversationSlect", props.data);
};

const converstationTouchStart = () => {
  emit("converstationTouchStart");
};

const converstationTouchEnd = () => {
  emit("converstationTouchEnd");
};

const emit = defineEmits([
  "reSendMsg",
  "sendFail",
  "chatTipsClick",
  "conversationSlect",
  "converstationTouchStart",
  "converstationTouchEnd",
]);
</script>

<style lang="scss" scoped>
.conversationItem-row {
  display: flex;
  flex-direction: row;
  width: calc(100%);
}
.conversationItem-select {
  width: 36rpx;
  margin-right: 32rpx;
  margin-top: 90rpx;
  .selectIcon {
    width: 36rpx;
    height: 36rpx;
  }
}
.conversationItem {
  width: calc(100% - 78rpx);
  &-time {
    font-size: 28rpx;
    color: #999999;
    line-height: 33rpx;
    text-align: center;
    padding-bottom: 32rpx;
  }

  &-bottomStatus {
    margin-top: 0px;
  }
  .conversationBg {
    margin-left: auto;
    display: flex;
    flex-direction: column;
  }

  .conversation {
    display: flex;
    flex-direction: row;
    padding-bottom: 32rpx;
    &-time {
      font-size: 28rpx;
      color: #999999;
      line-height: 33rpx;
    }
    &-avatarOther {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-right: 24rpx;
    }
    &-avatarMe {
      margin-left: 24rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
    }
    &-status {
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
    }
  }
  .conversation-text {
    font-size: 32rpx;
    color: #ffffff;
    line-height: 38rpx;
  }
  .conversation-textOther {
    font-size: 32rpx;
    color: #111111;
    line-height: 38rpx;
  }
  .conversation-meCard {
    margin-left: auto;
    margin-right: 0px;
  }

  .conversation-meCardLoading {
    margin-left: 24rpx;
    margin-right: 0px;
  }
  .conversation-otherCard {
    margin-left: 0px;
    margin-right: auto;
  }
}
</style>
